<template>
    <el-card class="b-table-search" shadow="never">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true"
            label-width="auto">
            <el-form-item :label="field.label" :prop="field.prop" v-for="field in fieldsData" :key="field.prop">
                <!-- 输入框 -->
                <el-input :id="field.prop" v-model="queryParams[field.prop]" :placeholder="placeholder(field)"
                    v-if="field.components === 'input'" @keyup.enter.native="handleEnter"
                    @change="field.onChange"></el-input>
                <!-- 下拉框 -->
                <!-- <el-select :id="field.prop" v-model="queryParams[field.prop]" :placeholder="placeholder(field)"
                v-if="field.components === 'select'" @change="field.onChange" filterable>
                <el-option v-for="item in field.options" :key="item.value" :label="item.label"
                    :value="item.value"></el-option>
            </el-select> -->
                <bSelect v-model="queryParams[field.prop]" v-if="field.components === 'select'" :config="field"
                    @change="field.onChange" filterable @optionsChange="field.optionsChange"></bSelect>
                <el-date-picker :id="field.prop" v-if="field.components == 'date'" :type="field.type"
                    :placeholder="placeholder(field)" v-model="queryParams[field.prop]" :format="field.format"
                    :value-format="field.valueFormat" start-placeholder="开始日期" end-placeholder="结束日期"
                    :default-time="field.defaultTime" :clearable="false" @change="field.onChange" />
            </el-form-item>
            <el-form-item class="btn-group">
                <el-button type="primary" icon="el-icon-search" @click="handleQuery">
                    搜索
                </el-button>
                <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
                <el-button type="text" v-if="fields.more" @click="open = !open">{{ open ? '收起' : '展开' }}</el-button>
            </el-form-item>
        </el-form>
    </el-card>
</template>

<script>
import bSelect from '@/components/bSelect';
export default {
    name: 'bTableSearch',
    components: { bSelect },
    props: {
        value: {
            type: Object,
            default: () => ({})
        },
        fields: {
            type: Object,
            default: () => ({})
        }
    },
    watch: {
        value: {
            handler(val) {
                this.queryParams = val
            },
            immediate: true,
            deep: true
        },
        queryParams: {
            handler(val) {
                this.$emit('input', val)
            }, deep: true
        }
    },
    data() {
        return {
            queryParams: {},
            open: false
        }
    },
    computed: {
        fieldsData() {
            let arr = []
            for (const key in this.fields) {
                let field = this.fields[key]
                if (key == 'more') {
                    for (const key2 in field) {
                        arr.push({ ...field[key2], prop: key2, hide: true })
                    }
                } else {
                    arr.push({ ...field, prop: key })
                }
            }
            let res = []
            arr.forEach(field => {
                this.$set(this.queryParams, field.prop, this.queryParams[field.prop] ?? undefined)
                if (field.components == 'date') {
                    if (field.type == 'daterange') {
                        this.$set(this.queryParams, field.prop, this.queryParams[field.prop] ?? [])
                        field.defaultTime = field.defaultTime ?? ['00:00:00', '23:59:59']
                    } else {
                        field.defaultTime = field.defaultTime ?? undefined
                    }
                }
                field.onChange = field.onChange && field.onChange instanceof Function ? field.onChange : () => { }
                if (field.components == 'select') {
                    field.optionsChange = field.optionsChange && field.optionsChange instanceof Function ? field.optionsChange : () => { }
                }
                field.valueFormat = field.valueFormat || (field.components == 'date' ? 'yyyy-MM-dd HH:mm:ss' : undefined)
                if (!field.hide || (field.hide && this.open)) {
                    res.push(field)
                }
            })

            return res;
        },
    },
    methods: {
        placeholder(field) {
            if (field.placeholder) return field.placeholder
            return (['input'].includes(field.components) ? '请输入' : '请选择') + field.label
        },
        handleQuery() {
            this.$emit('input', this.queryParams)
            setTimeout(() => {
                this.$emit('search', this.queryParams)
            }, 0)
        },
        resetQuery() {
            this.$refs.queryForm.resetFields()
            this.$emit('reset')
        },
        handleEnter() {
            this.handleQuery()
        },
    }
}
</script>

<style lang="scss" scoped>
.el-card {
    margin-bottom: 16px;

    :deep(.el-card__body) {
        padding-bottom: 0;
    }
}

.el-form {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    :deep(.el-form-item) {
        &:not(.btn-group) {
            width: calc(16.66% - 10px);
            min-width: 300px;
            display: flex;
            align-items: center;

            .el-form-item__label {
                white-space: nowrap;
            }

            .el-form-item__content {
                flex: 1;
                min-width: 200px;

                .el-date-editor {
                    .el-range__close-icon {
                        display: none;
                    }
                }
            }
        }
    }
}
</style>